<template>
  <li
    class="play-list-card"
    @click="$router.push({ path: '/playlist', query: { id: item.id } })"
  >
    <div class="thumb">
      <img
        :src="`${item.picUrl}?imageView=1&type=webp&thumbnail=247x0`"
        alt=""
      />
      <span>{{ item.playCount | parsePlayCount }}</span>
    </div>
    <h5>{{ item.name }}</h5>
  </li>
</template>

<script>
export default {
  props: {
    item: Object,
  },
  filters: {
    parsePlayCount: function (value) {
      return (value / 10000).toFixed(1) + "万";
    },
  },
};
</script>

<style lang="less">
.play-list-card {
  //   width: 30%;
  flex-basis: 30%;
  //   flex: 1;
  flex-grow: 1;
  margin-bottom: 10px;
  &:nth-child(3n + 2) {
    margin: 0 5px;
  }
  .thumb {
    position: relative;
    background: red;
    img {
      vertical-align: middle;
    }
    span {
      position: absolute;
      top: 5px;
      right: 5px;
      color: white;
      text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    }
  }
  h5 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
}
</style>